<template>
  <div class="home">
    <h2>首页组件---{{ comNum }}</h2>
    <ul>
      <li v-for="comListData in comListDatas" :key="comListData.goods_id">
        <img :src="comListData.goods_thumb" alt>
        <p>{{comListData.title}}</p>
      </li>
    </ul>
    <button @click="changeNumFn">提交mutations中的方法--改变state中的num值</button>
    <button @click="actChangeNumFn">提交actions中的方法--改变state中的num值</button>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  computed: {
    comNum() {
      return this.$store.state.num;
    },
    comListDatas() {
      return this.$store.state.listDatas;
    }
  },
  methods: {
    changeNumFn() {
      //提交mutations中的方法
      // this.$store.commit("mutations中定义的方法")
      this.$store.commit("changeNum");
    },
    actChangeNumFn() {
      // this.$store.dispatch("actions中定义的方法")
      this.$store.dispatch("actChangeNum");
    }
  },
  mounted() {
    this.$store.dispatch("actChangeListDatas", {
      page: 1,
      size: 10,
      type: "is_best"
    });
  }
};
</script>
